<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>众筹</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>
    <style>

    </style>
</head>

<body>
    <!--头部-->
    <div class="public-header flex">
        <!--<span class="public-header-left-search"></span>-->
        <span class="public-header-left-back"></span>
        <span class="public-header-center">众筹</span>
        <span class="public-header-right"></span>
    </div>

    <!--正文-->
    <div class="All-the-chips bc-gray">
        <div class="hd flex">
            <span class="active">即将开始</span>
            <span>全部类别</span>
        </div>
        <div class="td">
            <div class="td1">
                <ul>
                    <li class="active">
                        综合推荐
                    </li>
                    <li>
                        最新上线
                    </li>
                    <li>
                        金额最多
                    </li>
                    <li>
                        支持最多
                    </li>
                    <li>
                        即将结束
                    </li>
                    <li>
                        即将开始
                    </li>
                </ul>
            </div>
            <div class="td2">
                <ul class="clearfix">
                    <li class="active">全部类别</li>
                    <li>全部类别</li>
                    <li>全部类别</li>
                    <li>全部类别</li>
                    <li>全部类别</li>
                </ul>
            </div>
        </div>
        <div class="bd">
            <div class="bd1">
                <ul>
                    <li class="clearfix">
                        <img src="../img/配图@2x.png" alt="">
                        <div class="right">
                            <h5>内容内容内容内容内容内容</h5>
                            <p>￥4000<span>起</span></p>
                            <p class="rage" style="display:none;">
                                <progress id="myProgress" value="75" max="100"></progress><span>75%</span>
                            </p>
                            <p style="display:none;">
                                <span>1544人</span>
                                <em>31.08万元</em>
                                <i>26天</i>
                            </p>
                            <div><span>16小时</span>后开始</div>
                        </div>
                    </li>
                    <li class="clearfix">
                        <img src="../img/配图@2x.png" alt="">
                        <div class="right">
                            <h5>内容内容内容内容内容内容</h5>
                            <p>￥4000<span>起</span></p>
                            <p class="rage" style="display:none;">
                                <progress id="myProgress" value="75" max="100"></progress><span>75%</span>
                            </p>
                            <p style="display:none;">
                                <span>1544人</span>
                                <em>31.08万元</em>
                                <i>26天</i>
                            </p>
                            <div><span>16小时</span>后开始</div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="bd2">

            </div>
        </div>

    </div>


    <!--灰色浮层-->
    <div class="mask" style="background: rgba(50,50,50,0.5);display:none;z-index:2;top:.84rem;"></div>
    <script src='../js/vue.js'></script>
    <script src='../js/vue-resource.min.js'></script>


    <script>
        $(function () {
            // 点击综合推荐
            $('.hd span').click(function () {
                $(this).toggleClass('active').siblings().removeClass('active');
                $('.mask').fadeToggle();
                var idx = $(this).index();
                $('.td>div').eq(idx).toggleClass('active').siblings().removeClass('active');

                $(this).toggleClass('arrow-top')

            })
            $('.td1 ul li').click(function () {
                $(this).addClass('active').siblings().removeClass('active');
                $('.mask').hide();
                $('.td>div').removeClass('active');
            })


        })
    </script>

    <script>
        $(function () {
            new Vue({
                el: 'body',
                data: {

                },
                ready: function () {
                    this.$http.get(base_url+'ZITAOHUI/recommend').then(
                        function (response) {
                            console.log()
                        },
                        function () {

                        })
                },
                methods: {
                    click_time: function () {

                    },
                    click_type: function () {

                    }
                }
            })
        })
    </script>
</body>

</html>